<template>
  <!-- 角色管理页面 -->
  <div>
    <el-row class="caliberHierarchy container">
      <el-col style="margin-right:10px; " :span="17" class="content-left">
        <!-- <el-row class="handleBox">
          <el-col :span="18">
           
          </el-col>
          <el-col :span="6">
            <div class="handleIconBox">
              <el-popover
                placement="bottom"
                trigger="click"
                popper-class="icon_porper"
              >
                <div class="search_porper">
                
                  <div style="text-align:center;padding:10px">
                    <el-button type="primary" size="mini">查询</el-button>
                    <el-button
                      size="mini"
                      @click="
                        (searchForm.roleCode = ''), (searchForm.roleName = '')
                      "
                      >重置</el-button
                    >
                  </div>
                </div>
                <i
                  class="iconfont icon-sousuo"
                  title="搜索"
                  slot="reference"
                ></i>
              </el-popover>
              <el-popover
                placement="bottom"
                width="150"
                trigger="click"
                popper-class="icon_porper"
              >
                <div class="operation_checkbox">
                 
                </div>
                <i
                  class="iconfont icon-liebiaoshezhi"
                  title="列表设置"
                  slot="reference"
                ></i>
              </el-popover>
              <i class="iconfont icon-export" title="导出"></i>
              <i class="iconfont icon-import" title="导入"></i>
            </div>
          </el-col>
        </el-row> -->
        <!-- 操作区域 -->
         <upper-template @search = "searchFunc" @clear= "(searchForm.roleCode = ''), (searchForm.roleName = '')">
           <!-- 操作按钮区 -->
           <template slot="buttonArea">
              <el-button type="primary" @click="addFunc">新增</el-button>
            <el-button type="primary" @click="editFunc">编辑</el-button>
            <el-button type="primary" @click="delFunc">删除</el-button>
            <el-button type="primary" @click="roleConfig(0)"
              >角色授权</el-button
            >
            <el-button type="primary" @click="roleConfig(1)"
              >可管理角色配置</el-button
            >
            <el-button type="primary" @click="roleConfig(2)"
              >角色互斥配置</el-button
            >
            <el-button type="primary" @click="roleConfig(3)"
              >资源配置</el-button
            >
           </template>
           <!-- 搜索区 -->
           <template slot="searchArea">
               <el-form
                    :model="searchForm"
                    ref="searchForm"
                    label-width="90px"
                    label-position="right"
                    size="mini"
                  >
                    <el-form-item label="角色编号：">
                      <el-input
                        v-model="searchForm.roleCode"
                        style="width:134px"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="角色名称：">
                      <el-input
                        v-model="searchForm.roleName"
                        style="width:134px"
                      ></el-input>
                    </el-form-item>
                  </el-form>
           </template>
           <!-- 显示隐藏区 -->
           <template slot="columnHide">
              <el-checkbox-group v-model="checkList">
                    <el-checkbox
                      v-for="item in textData"
                      :label="item.label"
                      :key="item.prop"
                      >{{ item.label }}
                    </el-checkbox>
                  </el-checkbox-group>
           </template>
          </upper-template>
        <el-table
          ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          @row-click="authorizeFor"
        >
          <el-table-column
            width="55"
            type="selection"
            fixed="left"
          ></el-table-column>
          <el-table-column
            prop="roleCode"
            label="角色编号"
            align="center"
            v-if="columnState[0]"
          >
          </el-table-column>
          <el-table-column
            prop="roleName"
            label="角色姓名"
            align="center"
            sortable
            v-if="columnState[1]"
          >
          </el-table-column>
          <el-table-column
            prop="roleDesc"
            label="角色描述"
            sortable
            v-if="columnState[2]"
          >
          </el-table-column>

          <el-table-column
            prop="mgrRole"
            label="可管理角色"
            sortable
            v-if="columnState[3]"
            :formatter="
              row => {
                return row.mgrRole.map(v => v.roleName).toString();
              }
            "
          >
          </el-table-column>
        </el-table>
         <pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @refresh="searchFunc"
      :current="searchForm.page"
      :total="400"
    ></pagination>
      </el-col>
      <el-col :span="6" class="content-right">
        <div class="title">
          <div style="float:left">
            <span class="gun"></span> 为 {{ userName }}{{ userDo }}
          </div>
          <div class="handleIconBox" style="width:50px;padding-top:16px">
            <!-- <i
              class="iconfont icon-export"
              title="导出"
              style="margin-right:15px"
            ></i>
            <i class="iconfont icon-import" title="导入"></i> -->
          </div>
        </div>
        <div style="padding:10px">
             <el-button
          type="primary"
          @click="saveConfigTree"
          v-if="userDoFlag == 0 || userDoFlag == 3"
          >确定</el-button
        >
        <el-button
          type="primary"
          @click="saveConfigTable"
          v-if="userDoFlag == 1 || userDoFlag == 2"
          >保存</el-button
        >
        </div>
       
        <el-tree
          v-if="userDoFlag == 0 || userDoFlag == 3"
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
          default-expand-all
          show-checkbox
          ref="configTree"
          node-key="id"
          :expand-on-click-node="false"
          check-on-click-node
        ></el-tree>
        <el-table
          v-if="userDoFlag == 1 || userDoFlag == 2"
          ref="roleTable"
          :data="tableDataRole"
          style="width: 100%"
          class="isRightTable"
          :header-cell-style="$store.state.style.tableHead"
          :cell-style="$store.state.style.tableBody"
        >
          <el-table-column
            width="55"
            type="selection"
            fixed="left"
          ></el-table-column>
          <el-table-column
            prop="roleCode"
            label="角色编号"
            sortable
          ></el-table-column>
          <el-table-column
            prop="roleName"
            label="角色名称"
            sortable
          ></el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-dialog v-dialogDrag
      :title="saveTitles[saveFlg - 1]"
      :visible.sync="addOrEdit"
      top="2%"
    >
      <el-form
        :model="saveForm"
        ref="addTreeForm"
        label-width="150px"
        label-position="right"
        :rules="saveFormRules"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="角色编码：" prop="roleCode">
              <el-input
                v-model="saveForm.roleCode"
                style="width:200px"
                maxlength="40"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色名称：" prop="roleName">
              <el-input
                v-model="saveForm.roleName"
                style="width:200px"
                maxlength="40"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色描述：" prop="roleDesc">
              <el-input
                v-model="saveForm.roleDesc"
                style="width:200px"
                type="password"
                maxlength="40"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="管理角色：" prop="mgrRoleId" v-if="saveFlg == 1">
              <el-select
                v-model="saveForm.mgrRoleId"
                placeholder="请选择"
                style="width:200px"
              >
                <el-option
                  v-for="item in mgrRoleIdList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addOrEdit = false" 
          >确 定</el-button
        >
        <el-button @click="addOrEdit = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { publicManage } from "@/api/index";
import upperTemplate from "@/components/upperTemplate.vue"
export default {
  data() {
    return {
      userName: "", //右侧用户名
      userDo: "授权角色", // 右侧用户行为
      userDoFlag: 0,
      addOrEdit: false, // 新增/编辑/查看弹窗
      saveFlg: 1, // 1:新增，2：编辑，3查看,
      saveTitles: ["添加新角色", "编辑角色信息"],
      // 机构树
      orgList: [
        {
          value: "01",
          label: "一级机构",
          children: [{ value: "001", label: "二级机构" }]
        }
      ],
      // 右侧树data
      treeData: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1"
                },
                {
                  id: 10,
                  label: "三级 1-1-2"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1"
            },
            {
              id: 6,
              label: "二级 2-2"
            }
          ]
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1"
            },
            {
              id: 8,
              label: "二级 3-2"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 角色管理下拉框
      mgrRoleIdList: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        }
      ],
      // search机构树悬停提示
      searchOrgTip: "",
      // save表单机构树悬停提示
      saveOrgTip: "",
      searchForm: {},
      saveForm: {
        operateType: "2",
        userId: "",
        userName: "",
        realName: "",
        password: "",
        passwordStr: "",
        orgId: "",
        orgId_text: "",
        useFlag: "",
        empNo: "",
        idcard: "",
        officePhone: "",
        mobilePhone: "",
        famliyPhone: "",
        email: ""
      },
      saveFormRules: {
        userName: [
          { required: true, message: "该输入项为必输项", trigger: "blur" }
        ],
        realName: [
          { required: true, message: "该输入项为必输项", trigger: "blur" }
        ],
        password: [
          { required: true, message: "该输入项为必输项", trigger: "blur" },
          { min: 6, max: 8, message: "密码长度在6-8之间", trigger: "blur" }
          // { validator: this.validPassword, trigger: "blur" },
        ],
        passwordStr: [
          { required: true, message: "该输入项为必输项", trigger: "blur" },
          { validator: this.validPassword, trigger: "blur" }
        ],
        orgId: [
          { required: true, message: "该输入项为必输项", trigger: "blur" }
        ],
        status: [
          { required: true, message: "该输入项为必输项", trigger: "blur" }
        ]
      },
      checkList: [],
      // 完整表头字段&&列属性配置
      textData: [
        { prop: "roleCode", label: "角色编号" },
        { prop: "roleName", label: "角色名称" },
        { prop: "roleDesc", label: "角色描述 " },
        { prop: "mgrRole", label: "可管理角色" }
      ],
      // 获取table的数据
      tableData: [
        {
          roleId: "40288dfd73c396d70173c8d17b7a0007",
          roleCode: "ROLE_BBW",
          roleName: "BBW",
          roleDesc: "BBW",
          userId: null,
          supRoleId: null,
          mgrRole: [],
          roleMutex: []
        },
        {
          roleId: "40288dfd734fed1601736ed9cbc908e1",
          roleCode: "ROLE_ADBC",
          roleName: "农发总行管理员",
          roleDesc: null,
          userId: null,
          supRoleId: null,
          mgrRole: [],
          roleMutex: []
        },
        {
          roleId: "40288deb6fc5bfb401703804ffd6005e",
          roleCode: "ROLE_TC_1001",
          roleName: "总行头寸管理员",
          roleDesc: "总行头寸管理员",
          userId: null,
          supRoleId: null,
          mgrRole: [
            {
              roleId: "40288deb6fc5bfb4017038065c6f0064",
              roleCode: null,
              roleName: "支行头寸管理员",
              roleDesc: null,
              userId: null,
              supRoleId: "40288deb6fc5bfb401703804ffd6005e",
              mgrRole: [],
              roleMutex: []
            },
            {
              roleId: "40288deb6fc5bfb40170380582c00061",
              roleCode: null,
              roleName: "分行头寸管理员",
              roleDesc: null,
              userId: null,
              supRoleId: "40288deb6fc5bfb401703804ffd6005e",
              mgrRole: [],
              roleMutex: []
            }
          ],
          roleMutex: []
        },
        {
          roleId: "40288deb6fc5bfb4017038065c6f0064",
          roleCode: "ROLE_TC_1003",
          roleName: "支行头寸管理员",
          roleDesc: "支行头寸管理员",
          userId: null,
          supRoleId: null,
          mgrRole: [],
          roleMutex: []
        },
        {
          roleId: "40288deb6fc5bfb40170380582c00061",
          roleCode: "ROLE_TC_1002",
          roleName: "分行头寸管理员",
          roleDesc: "分行头寸管理员",
          userId: null,
          supRoleId: null,
          mgrRole: [],
          roleMutex: []
        },
        {
          roleId: "402881b339752b450139752df0950001",
          roleCode: "ROLE_sysadmin",
          roleName: "sysadmin",
          roleDesc: "sysadmin",
          userId: null,
          supRoleId: null,
          mgrRole: [
            {
              roleId: "40288dfd73946e140173993c44c80027",
              roleCode: null,
              roleName: "集市管理员",
              roleDesc: null,
              userId: null,
              supRoleId: "402881b339752b450139752df0950001",
              mgrRole: [],
              roleMutex: []
            },
            {
              roleId: "40288deb6fc5bfb4017038065c6f0064",
              roleCode: null,
              roleName: "支行头寸管理员",
              roleDesc: null,
              userId: null,
              supRoleId: "402881b339752b450139752df0950001",
              mgrRole: [],
              roleMutex: []
            },
            {
              roleId: "40288deb6fc5bfb401703804ffd6005e",
              roleCode: null,
              roleName: "总行头寸管理员",
              roleDesc: null,
              userId: null,
              supRoleId: "402881b339752b450139752df0950001",
              mgrRole: [],
              roleMutex: []
            },
            {
              roleId: "40288deb6fc5bfb40170380582c00061",
              roleCode: null,
              roleName: "分行头寸管理员",
              roleDesc: null,
              userId: null,
              supRoleId: "402881b339752b450139752df0950001",
              mgrRole: [],
              roleMutex: []
            },
            {
              roleId: "40288dfd734fed1601736ed9cbc908e1",
              roleCode: null,
              roleName: "农发总行管理员",
              roleDesc: null,
              userId: null,
              supRoleId: "402881b339752b450139752df0950001",
              mgrRole: [],
              roleMutex: []
            },
            {
              roleId: "40288dfd72220a74017225a92f6c01d6",
              roleCode: null,
              roleName: "IES分行用户",
              roleDesc: null,
              userId: null,
              supRoleId: "402881b339752b450139752df0950001",
              mgrRole: [],
              roleMutex: []
            },
            {
              roleId: "40288dfd73c396d70173c8d17b7a0007",
              roleCode: null,
              roleName: "BBW",
              roleDesc: null,
              userId: null,
              supRoleId: "402881b339752b450139752df0950001",
              mgrRole: [],
              roleMutex: []
            }
          ],
          roleMutex: []
        },
        {
          roleId: "40288dfd72220a74017225a92f6c01d6",
          roleCode: "ROLE_IES_ORGUSER",
          roleName: "IES分行用户",
          roleDesc: null,
          userId: null,
          supRoleId: null,
          mgrRole: [],
          roleMutex: []
        },
        {
          roleId: "40288dfd73946e140173993c44c80027",
          roleCode: "ROLE_DMS",
          roleName: "集市管理员",
          roleDesc: "集市管理员",
          userId: null,
          supRoleId: null,
          mgrRole: [],
          roleMutex: []
        }
      ],
      tableDataRole: [
        {
          creator: "sysadmin",
          createdTm: 1596802038650,
          modifier: null,
          modifiedTm: null,
          status: "1",
          roleId: "40288dfd73c396d70173c8d17b7a0007",
          roleCode: "ROLE_BBW",
          roleName: "BBW",
          roleDesc: "BBW",
          roleType: null,
          admFlag: "2",
          roleLevel: null,
          mgrRoleNames: null
        },
        {
          creator: "sysadmin",
          createdTm: 1589769744235,
          modifier: null,
          modifiedTm: null,
          status: "1",
          roleId: "40288dfd72220a74017225a92f6c01d6",
          roleCode: "ROLE_IES_ORGUSER",
          roleName: "IES分行用户",
          roleDesc: null,
          roleType: null,
          admFlag: "2",
          roleLevel: null,
          mgrRoleNames: null
        },
        {
          creator: null,
          createdTm: null,
          modifier: null,
          modifiedTm: null,
          status: "1",
          roleId: "402881b339752b450139752df0950001",
          roleCode: "ROLE_sysadmin",
          roleName: "sysadmin",
          roleDesc: "sysadmin",
          roleType: "1",
          admFlag: "0",
          roleLevel: null,
          mgrRoleNames: null
        },
        {
          creator: "sysadmin",
          createdTm: 1595292634056,
          modifier: null,
          modifiedTm: null,
          status: "1",
          roleId: "40288dfd734fed1601736ed9cbc908e1",
          roleCode: "ROLE_ADBC",
          roleName: "农发总行管理员",
          roleDesc: null,
          roleType: null,
          admFlag: "2",
          roleLevel: null,
          mgrRoleNames: null
        },
        {
          creator: "sysadmin",
          createdTm: 1581487850176,
          modifier: null,
          modifiedTm: null,
          status: "1",
          roleId: "40288deb6fc5bfb40170380582c00061",
          roleCode: "ROLE_TC_1002",
          roleName: "分行头寸管理员",
          roleDesc: "分行头寸管理员",
          roleType: null,
          admFlag: "2",
          roleLevel: null,
          mgrRoleNames: null
        },
        {
          creator: "sysadmin",
          createdTm: 1581487816661,
          modifier: null,
          modifiedTm: null,
          status: "1",
          roleId: "40288deb6fc5bfb401703804ffd6005e",
          roleCode: "ROLE_TC_1001",
          roleName: "总行头寸管理员",
          roleDesc: "总行头寸管理员",
          roleType: null,
          admFlag: "2",
          roleLevel: null,
          mgrRoleNames: null
        },
        {
          creator: "sysadmin",
          createdTm: 1581487905900,
          modifier: null,
          modifiedTm: null,
          status: "1",
          roleId: "40288deb6fc5bfb4017038065c6f0064",
          roleCode: "ROLE_TC_1003",
          roleName: "支行头寸管理员",
          roleDesc: "支行头寸管理员",
          roleType: null,
          admFlag: "2",
          roleLevel: null,
          mgrRoleNames: null
        },
        {
          creator: "sysadmin",
          createdTm: 1596003730630,
          modifier: null,
          modifiedTm: null,
          status: "1",
          roleId: "40288dfd73946e140173993c44c80027",
          roleCode: "ROLE_DMS",
          roleName: "集市管理员",
          roleDesc: "集市管理员",
          roleType: null,
          admFlag: "2",
          roleLevel: null,
          mgrRoleNames: null
        }
      ],
    };
  },
  created() {
    this.checkListInit();
    console.log(this.tableData, "模拟数据");
  },
 components: {
   upperTemplate:upperTemplate,
 },
  computed: {
    columnState() {
      console.log(this.checkList);
      let arr = [],
        arr1 = this.textData,
        arr2 = this.checkList;
      for (let i = 0; i < arr1.length; i++) {
        let flg = false;
        for (let j = 0; j < arr2.length; j++) {
          if (arr1[i].label === arr2[j]) {
            flg = true;
          }
        }
        arr.push(flg);
      }
      return arr;
    }
  },
  mounted() {
    this.getList();
  },
  watch: {},
  methods: {
    // 两个密码校验
    validPassword(rule, value, callback) {
      if (this.saveForm.password === this.saveForm.passwordStr) {
        callback();
      } else {
        callback(new Error("两次输入密码不一致"));
      }
    },
    checkListInit() {
      this.checkList = this.textData.map(v => {
        return v.label;
      });
    },
    searchFunc(){
      console.log("调用了search")
    },
    addFunc() {
      this.saveFlg = 1;
      for (let k in this.saveForm) {
        this.saveForm[k] = "";
      }
      this.addOrEdit = true;
    },
    editFunc() {
      this.saveFlg = 2;
      let selection = this.$refs.multipleTable.selection;
      if (selection.length != 1) {
        return this.$message.warning("请选择一条数据进行修改");
      }
      let row = selection[0];
      let form = { ...row };
      this.saveForm = form;
      this.addOrEdit = true;
    },
    delFunc() {
      let selection = this.$refs.multipleTable.selection;
      if (selection.length < 1) {
        return this.$message.warning("请选择要删除的数据");
      }
      this.$confirm(
        "你确定要注销选中的用户吗，注销后该用户将不能使用，请慎重！",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          this.$message.success("注销成功");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消注销"
          });
        });
    },
    handleNodeClick() {
      let nodes = this.$refs.configTree.getCheckedNodes();
      console.log(nodes);
    },
    caliberProjectNameFormatter(row) {
      return row.caliberProject.caliberProjectName;
    },
    getList() {
      publicManage.query({ppp:"我的参数"}).then(res => {
        console.log(res,"返回res");
      });
    },
    // 点击表格右侧显示为xx授权
    authorizeFor(row) {
      if (this.$refs.multipleTable) {
        this.$refs.multipleTable.clearSelection();
      }
      this.$refs.multipleTable.toggleRowSelection(row, true);
      this.userName = row.roleName;
    },
  
    roleConfig(val) {
      let arr = [" 授权角色", " 配置可管理角色", " 配置角色互斥", " 配置资源 "];
      let checked = this.$refs.multipleTable.selection;
      if (checked.length < 1) {
        return this.$message.warning("请选择一条数据");
      } else if (checked.length > 1) {
        return this.$message.warning("只能选择一条数据");
      } else {
        this.userDo = arr[val];
        this.userDoFlag = val;
        // 选中第一行
        //   this.$refs.multipleTable.setCurrentRow(this.tableData[0])
      }
    },
    saveConfigTree() {},
    saveConfigTable() {},
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // // 增加下级树集
    // addNextTree() {
    //   let node = this.$refs.caliberConfigTree.getCheckedNodes()[0];
    //   if (node.id !== 1) {
    //     return this.$message.warning("请选择根节点");
    //   }
    //   this.isAddNextTree = true;
    // },
    // // 增加下级子叶
    // addNextNode() {
    //   let nodes = this.$refs.caliberConfigTree.getCheckedNodes();
    //   console.log(nodes);
    // },
    // // 删除节点
    // delNode() {
    //   let nodes = this.$refs.caliberConfigTree.getCheckedNodes();
    //   console.log(nodes);
    //   if (nodes.length < 1) {
    //     return this.$message.warning("请选择要删除的节点");
    //   }
    //   this.$confirm("你确认要删除吗？", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning"
    //   })
    //     .then(() => {
    //       this.$message.success("success");
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消删除"
    //       });
    //     });
    // }
  }
};
</script>

<style lang="scss" scoped>
</style>